import React, { Component } from 'react';

import { TabBar } from 'antd-mobile';

import '../styles/index/Tabbar.scss'

import { AppOutline, AppstoreOutline, ShopbagOutline, UserOutline } from 'antd-mobile-icons';
import { withRouter } from 'react-router-dom';

class Tabbar extends Component {
    state = {
        tabs: [
            {
                key: '/index/home',
                title: '首页',
                icon: <AppOutline />
            },
            {
                key: '/index/cate',
                title: '分类',
                icon: <AppstoreOutline />
            },
            {
                key: '/index/car',
                title: '购物车',
                icon: <ShopbagOutline />
            },
            {
                key: '/index/mine',
                title: '我的',
                icon: <UserOutline />
            }
        ]
    }
    qiehuan(key) {
        this.props.history.push(key)
    }
    render() {
        return (
            <div className='tabbar'>
                <TabBar onChange={(key) => { this.qiehuan(key) }}>
                    {this.state.tabs.map(item => (
                        <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                    ))}
                </TabBar>
            </div>
        );
    }
}

export default withRouter(Tabbar);